{* $Id$ *}
{include_core file="admin/lib/header.html" title="成员展示"}
<style>
  .td-search{
    position: relative;
  }
  .input-search{
    padding:2px;
    border:1px solid #888;
    width:146px;
  }
  .input-search:focus{
    border:1px solid #888;
    box-shadow: none;
  }
  .slt-search{
    width:150px;
    border-bottom: 1px solid #BCBCBC;
    border-left: 1px solid #BCBCBC;
    border-right: 1px solid #BCBCBC;
    background: #FCFCFC;
    height: 100px;
    overflow: auto;
  }
  .slt-search li{
    padding:2px;
    height: 16px;
    line-height: 16px;
  }
  .slt-search li:hover{
    color:#FFF;
    background: #5e1ddf;
  }
</style>
<div class="page-header border-bottom clearfix">
  <h2 class="left">成员管理<span style="color: #f00;">注意: 不论是APP用户还是后台用户, 每个用户只能有一个角色</span></h2>
  <a href="{AnUrl("role/admin/user_manage?id={$id}")}" class="btn btn-default btn-sm right">&lt;&nbsp;返回成员列表</a>
</div>
<!--start:添加成员新增-->
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('role/admin/save_user')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{$id}">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">所属角色组：</label></th>
        <td>
          <select class="search-f-slt1 js_role" name="info[role_id]">
            <option>请选择角色组</option>
            {foreach $role_list as $k=>$v}
            <option value="{$v.id}" {if $v.id == $id}selected{/if}>{$v.title}</option>
            {/foreach}
          </select>
          <div class="tips">可设置添加成员父级</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">成员用户名：</label></th>
        <td>
          <div class="td-search">
            <input name="info[user_id]" class="js_inputUser" type="hidden">
            <input type="text" class="input-search js_input">
            <ul class="slt-search js_sltUser" style="display:none;">
            </ul>
          </div>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*请输入手机号或用户名添加成员, 用户必须已存在</span></div>
        </td>
      </tr>
      <tr><th>&nbsp;</th><td class="noborder"><button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button></td></tr>
    </table>
  </form>
</div>
<!--end:添加成员新增-->
{load_js file='zclip/jquery.zclip.min.js'}
{load_js file='zclip/ZeroClipboard.js'}
<script>
$(function(){ 
  $('.js_input').keyup(function(){
    var userName = $(this).val();
    $.get("{AnUrl('role/admin/find_user_list')}", { user_name:userName }, function(data){
      if (data.info == 'ok') {
        $('.js_sltUser').html('');
        $('.js_sltUser').css('display', 'block');
        for (var i = 0; i < data.user_list.length; i++) {
          var user = data.user_list[i]['user_name'];
          if (!user) {
            user = data.user_list[i]['mobile'];
          }
          $('.js_sltUser').append('<li id-data="'+data.user_list[i]['id']+'">'+user+'</li>');
        }
      };
    }, 'json');
  });

  $('.js_sltUser').on('click', 'li', function(){
    var userId = $(this).attr('id-data');
    var userName = $(this).html();
    $('.js_inputUser').val(userId);
    $('.js_input').val(userName);
    $('.js_sltUser').css('display', 'none');
  });

  // 提交表单
  $('.js_submit').click(function(e){
    e.preventDefault();
    var roleId = $('.js_role').val();
    var userId = $('.js_inputUser').val();

    if (!roleId) {
      showMsg('请选择角色组名称');
      return;
    }
    if (!userId) {
      showMsg('请设置用户名');
      return;
    }

    $('.js_creatForm').submit();
  });
});
</script>
{include_core file="admin/lib/footer.html"}